<template>
  <div class="dirTree">
    <!-- 新建子文件夹popover -->
    <el-popover
      ref="popover1"
      placement="right"
      width="200"
      trigger="click"
      v-model="popover1"
      @show="dirName=''">
      <el-col :span="18">
        <el-input size="mini" v-model="dirName"></el-input>
      </el-col>
      <el-col :span="4" style="margin-left:5px;">
        <el-button size="mini" @click="handleAddSubDir" :loading="isSaving">确定</el-button>
      </el-col>
    </el-popover>
    <!-- 新建同级文件夹popover -->
    <el-popover
      ref="popover2"
      placement="right"
      width="200"
      trigger="click"
      @show="dirName=''"
      v-model="popover2">
      <el-col :span="18">
        <el-input size="mini" v-model="dirName"></el-input>
      </el-col>
      <el-col :span="4" style="margin-left:5px;">
        <el-button size="mini" @click="handleAddDir" :loading="isSaving">确定</el-button>
      </el-col>
    </el-popover>
    <!-- 修改文件夹popover -->
    <el-popover
      ref="popover3"
      placement="right"
      width="200"
      trigger="click"
      @show="dirName=''"
      v-model="popover3">
      <el-col :span="18">
        <el-input size="mini" v-model="dirName"></el-input>
      </el-col>
      <el-col :span="4" style="margin-left:5px;">
        <el-button size="mini" @click="handleEditDir" :loading="isSaving">确定</el-button>
      </el-col>
    </el-popover>
    <div v-loading="dirLoading">
      <h3>文件夹</h3>
      <el-tree
        :data="sourceDir"
        :props="defaultProps"
        node-key="id"
        :current-node-key="currentDir"
        :default-expanded-keys="[-1]"
        :expand-on-click-node="false"
        @node-click="handleTreeNodeClick">
      </el-tree>
      <div v-if="ifEdit" class="operate">
        <el-button v-popover:popover2>新建同级文件夹</el-button>
        <el-button v-popover:popover1>新建子文件夹</el-button>
        <el-button v-popover:popover3>修改文件夹名</el-button>
        <el-button @click="handleDelDir">删除文件夹</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  import {mapState, mapActions, mapMutations} from 'vuex'
  export default {
    props: {
      ifEdit: {
        type: Boolean,
        default: true
      }
    },
    data () {
      return {
        currentDir: null,
        dirName: '',
        defaultProps: {
          children: 'child',
          label: 'name'
        },
        popover1: false,
        popover2: false,
        popover3: false,
        ifAddSubDir: false,
        isSaving: false,
        dirLoading: false
      }
    },
    mounted () {
      this.initPageData()
    },
    computed: {
      ...mapState({
        sourceDir: state => state.sourceManage.sourceDir
      })
    },
    methods: {
      ...mapActions(['createFolder', 'getImageDir', 'delSource', 'editFolder', 'delFolder']),
      ...mapMutations(['SET_CURRENT_DIR']),
      async initPageData () {
        this.dirLoading = true
        await this.getImageDir()
        if (this.sourceDir.length) {
          this.SET_CURRENT_DIR(this.sourceDir[0].id)
          this.currentDir = this.sourceDir && this.sourceDir[0].id
        }
        this.$bus.$emit('reloadSource')
        this.dirLoading = false
      },
      // 新建子文件夹
      async handleAddSubDir () {
        this.isSaving = true
        let res = await this.createFolder({
          name: this.dirName,
          type: 2,
          pid: this.currentDir
        })
        this.isSaving = false
        if (res.data.code === 1) {
          this.$message.success('添加成功')
          this.popover1 = false
          this.getImageDir()
        }
      },
      // 新建同级文件夹
      async handleAddDir () {
        this.isSaving = true
        let res = await this.createFolder({
          name: this.dirName,
          type: 2,
          pid: this.pid
        })
        this.isSaving = false
        if (res.data.code === 1) {
          this.$message.success('添加成功')
          this.popover2 = false
          this.getImageDir()
        }
      },
      // 选中文件夹
      handleTreeNodeClick (data) {
        this.currentDir = data.id
        this.pid = data.pid
        this.SET_CURRENT_DIR(data.id)
        this.$emit('SelectNode')
      },
      // 删除文件夹
      async handleDelDir () {
        await this.$confirm('是否确认删除', '确认')
        const res = await this.delFolder(this.currentDir)
        if (res.data.code === 1) {
          this.$message.success('删除成功')
          this.getImageDir()
        }
      },
      // 修改文件夹名
      async handleEditDir () {
        this.isSaving = true
        const res = await this.editFolder({
          name: this.dirName,
          sourceId: this.currentDir
        })
        this.isSaving = false
        if (res.data.code === 1) {
          this.$message.success('修改成功')
          this.popover3 = false
          this.getImageDir()
        }
      }
    }
  }
</script>
<style lang="scss">
  .dirTree{
    margin-bottom:10px;float:left;width:198px;min-height:310px;border:1px solid #e0e6ed;overflow:hidden;
    h3{height:48px;line-height:48px;background:#f9fafc;border-bottom:1px solid #e0e6ed;font-size:16px;text-align:center;font-weight:500}
    .el-tree{margin-bottom:15px;border:0}
    .el-button{display:block;margin:0 auto 10px auto;}
    .is-current>.el-tree-node__content{background:rgb(228, 232, 241);}
  }
</style>
